<template>
	<view>
		<view class="uploadMaterial">
			<view class="uploadMaterialTop">
				<view>上传原始素材</view>
				<view class="uploadMaterialcheck" v-for="(item,index) in sharelist" :key="index" :item="item" @click="timedata(item.id)">
					<view class="uploadMaterialquant" :class="item.selected?'uploadMaterialquan':''"></view>
					<text class="shar_time">{{item.name}}</text>
				</view>
			</view>
			
			<!-- <view class="uploadMaterialBottom" v-if="hasVideo == 1">
				<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
			</view>
			
			<view class="uploadMaterialBottom" v-if="hasVideo == 0">
				<image v-show="imagesShow" :src="file" @tap="chooseImage"></image>
				<video v-show="VideoOfImagesShow" :src="src" class="video"></video>
			</view> -->
			
			
			<view class="uploadMaterialBottom">
				<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
			</view>
			
			
		</view>
		
		<view class="beizhu">
			<view class="beizhu_tit">备注：</view>
			<view class="beizhu_con">1、上传需要设计或剪辑的原始素材。2、视频和图片不能同时上传。3、图片最多上传六张/视频课上传一天条。</view>
		</view>
		
		
		
		<view class="text_content">
			<view class="tui-textarea-box">
				<textarea class="tui-textarea" v-model.trim="textarea" @blur="bindTextAreaBlur" name="desc" placeholder="请输入你的需求~~~"
				 maxlength="500" placeholder-class="tui-phcolor-color" />
				</view>
		</view>
		
		
		<view class="inputList">
			<tui-list-cell>
				<view class="tui-flex">
					<input class="tui-input tui-text-right" placeholder="请输入您的电话" placeholder-class="tui-phcolor" v-model="mobile"/>
				</view>
			</tui-list-cell>
			<tui-list-cell>
				<view class="tui-flex">
					<input class="tui-input tui-text-right" placeholder="邮箱地址(接收素材用)" placeholder-class="tui-phcolor" v-model="email"/>
				</view>
			</tui-list-cell>
			<tui-list-cell>
				<view class="tui-flex">
					<view>支付</view>
					<view class="tui_red">¥:20.00</view>
				</view>
			</tui-list-cell>
			<tui-list-cell>
				<view class="tui-flex">
					<view style="display: flex;">
						<view>开启加急</view>
						<view>(开启后需额外支付30元)</view>
					</view>
					
					<switch :checked="isDefault" color="#06AD56" @change="switchChange" />
				</view>
			</tui-list-cell>
			<tui-list-cell>
				<view class="tui-flex">
					<view>合计支付</view>
					<view class="tui_red">¥:20.00</view>
				</view>
			</tui-list-cell>
			
		</view>
		
		<view class="loginbtn" @click="ConfirmUpload">
			<button>确认制作</button>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				select:false,
				sharelist: [
					{
						id: 1,
						name: "图片",
						selected: true,
						
					},
					{
						id: 0,
						name: "视频",
						selected: false,
					}
				],
				specList: [
					{
						id: 1,
						name: '选择类型',
					},
				],
				
				textarea:"",
				userId:"",
				
				hasVideo:"1",
				file:"../../static/img/me/mission_upload_pictures.png",
				src:"",
				urlUpload:"",
				imageData: [],
				serverUrl: "",
				value:[],
				cateGory:[],
				
				
				VideoOfImagesShow:false,
				imagesShow:true,
				mobile:"",
				email:"",
				isDefault:false,
				id:"",
				
			};
		},

		onLoad(options) {
			this.id = options.id
			this.serverUrl = this.tui.interfaceUrl() + '/wx/storage/upload'
		},

		methods: {
			switchChange: function(e) {
				this.isDefault = e.detail.value;
			},
			timedata(id){
				 for(let i=0;i<this.sharelist.length;i++){
					 if(this.sharelist[i].id==id){
						 this.sharelist[i].selected=true
					 }else{
						 this.sharelist[i].selected=false
					 }
				 }
				 console.log(this.hasVideo)
				 this.hasVideo = id
			},
			
			//成功返回的图片地址
			result: function(e) {
				this.imageData = e.imgArr;
				this.urlUpload = this.imageData.toString();
				console.log(this.urlUpload)
			},
			
			//移除图片
			remove: function(e) {
				let index = e.index
			},
			
			//文本域输入的文案
			bindTextAreaBlur: function (e) {
				console.log(e.detail.value)
			},
			
			//视频上传
			chooseImage: function (e) {
				
				uni.chooseVideo({
					maxDuration:10,
					count: 1,
					success: (res) => {
						console.log(res)
						console.log(JSON.stringify(res.tempFilePath))
						this.src = res.tempFilePath;
						this.VideoOfImagesShow = true;
						this.imagesShow = false;
						this.urlUpload = res.tempFilePath;
					}
				})
				

			},
			
			// 确认制作
			ConfirmUpload: function(){
				let _this = this;
				let urgent = "";
				if(_this.isDefault){
					urgent = 1
				}else{
					urgent = 0
				}
				if(_this.textarea){
					_this.tui.request('/app/team/submit', 'POST',
					{
						id: _this.id,
						email: _this.email,
						message: _this.textarea,
						mobile: _this.mobile,
						url: _this.urlUpload,
						urgent:urgent
					}, 
					false, false, false, )
						.then(res => {
							if(res.errno == 0){
								console.log(res)
								_this.tui.toast(res.errmsg)
								
							}else{
								console.log(res)
								
							}
						}).catch(err => {
							console.log(err)
						})
				}else{
					_this.tui.toast("请填写发布内容")
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	page {
		background: rgba(250, 250, 250, 1);
		padding-bottom: 106upx;
	}
	switch {
		transform: translateX(16upx) scale(.9);
	}

	/* 类型  商品 */
	.attr_content {
		padding: 10upx 30upx;
		margin-bottom: 60upx;
		
		
		.attr-list {
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 30upx 0 0;
			margin-bottom: 20upx;

			text {
				margin-right: 10px;
				border-radius: 30upx;
				padding: 10upx 20upx;
				font-size: 32upx;
				color: #333333;
				border: 1px solid #E6E6E6;
			}

			.selected {
				color: #6E609E;
				border: 1px solid #6E609E;
			}
		}
	}
	
	.text_content{
		display: block;
		width: 92%;
		height: 140rpx;
		margin: 0 auto;
		background: #fafafa;
		border: 1px solid #fafafa;
		color: #808080;
		font-size: 14px;
		padding: 10upx;
		margin-bottom: 10upx;
	}
	.inputList{
		display: block;
		margin: 0 auto;
	}
	
	.uploadMaterial{
		padding: 5px 15px;
		padding-top: 30upx;
		
		.uploadMaterialTop{
			display: flex;
			align-items: flex-end;
			font-size:32upx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(51,51,51,1);
			
		
			.uploadMaterialcheck{
				display: flex;
				align-items: center;
				font-size:28upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(128,128,128,1);
				padding-left: 60upx;
				position: relative;
			}
			
			
			
		}
		
	}
	.uploadMaterialBottom{
		margin-top: 60upx;
		
		image{
			display: block;
			width: 100px;
			height: 100px;
			margin-top: 10px;
		}
	}
	.tui-box-upload {	
		box-sizing: border-box;
	}
	
	/* 按钮 */
	.loginbtn {
		width: 90%;
		height: 10px;
		margin: 0 auto;
		margin-top: 195upx;
	}
	
	.loginbtn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #D14798;
	}
	.uploadMaterialquant{
		width: 12px;
		height: 12px;
		border: 2px solid #cccccc;
		border-radius: 50%;
		margin-right: 10px;
	}
	.uploadMaterialquan{
		width: 12px;
		height: 12px;
		border: 2px solid #6E609E;
		border-radius: 50%;
		margin-right: 10px;
	}
	.video{
		width: 200upx;
		height: 200upx;
	}
	
	.beizhu{
		padding: 5px 15px;
		margin-top: 15px;
		margin-bottom: 10upx;
		
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FB1B1B;
		line-height: 33upx;
	}
	
	
	.tui-flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
	
	}
	.tui_red{
		
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #DA0F0F;
	}
	
	
</style>
